<template>
	<view class="content">
		<view class="up">
			<view style="width: 50%;margin-left: 25%;">
				<text
					style="font-size: 30px; background-image: linear-gradient(to right,#0072FF,#00EAFF,#01AAFF); -webkit-background-clip:text; color: transparent;">河南农大智慧农业监测系统</text>
			</view>
			<view style="width: 20%;margin-top: 15px;margin-left: auto;margin-right: 0;color: #01AAFF;font-size: 20px;text-align: left;" @click="lookRealTime">实时记录</view>
		</view>
		<view class="down">
			<view class="left">
				<view class="left-option" @click="baseClick()">
					<view style="margin-left: 25px;height: 100%;width: calc(100% - 70px);">
						<text>{{baseName}}</text>
					</view>
					<view style="width: 20px;height: 20px;margin-left: auto;margin-right: 25px;margin-top: 5px;">
						<image src="../static/icon_002.png" mode="aspectFit" style="width: 20px;height: 20px;"></image>
					</view>
				</view>
				<view v-for="(item,index) in leftData" :key="index"
					style="width: 100%;display: flex;flex-direction: column;font-size: 14px;">
					<view style="width: 100%;height: 20px;display: flex;margin-top: 10px;">
						<view style="color: #DE8D05;margin-left: 25px;width: 20px;text-align: left;">{{index+1}}</view>
						<view style="border-bottom: 0.5px solid #0090FF;display: flex;width: calc(100% - 70px);">
							<view style="width: 20px;height: 20px;">
								<image :src="item.imge" mode="aspectFit" style="width: 20px;height: 20px;"></image>
							</view>
							<view style="color: #9FCEFF;margin-left: 5px;">{{item.name}}</view>
							<view style="color: #fff;margin-left: auto;margin-right: 0;">{{item.value}}</view>
						</view>
					</view>
				</view>
				<view style="width: 100%;height: calc(100% - 425px);margin-top: 10px;">
					<map style="height: 100%;width: 100%" :latitude="latitude" :longitude="longitude" :markers="markers"
						:scale="scale" @markertap="showMap()" @callouttap="showMap()"></map>
				</view>
			</view>
			<view class="middle">
				<view
					style="display: flex;flex-direction: column;width: 100%; height: 60%;border: 0.5px solid #007ED7;">
					<view style="display: flex;margin-left: 20px;width: calc(100% - 20px);height: 50%;">
						<view style="width: 25%;height: 100%;display: flex;flex-direction: column;position: relative;">
							<view style="position: absolute;width: 100%;height: 100%;top: 10px;">
								<image src="../static/icon_019.png" mode="aspectFit" style="width: 100%;height: 100%;">
								</image>
							</view>
							<view
								style="width: 100%;height: 25px;position: absolute;top: calc(50% - 12px);color: #ED4C21;font-size: 25px;text-align: center;">
								<text>{{gaugeData.left.value}}</text>
							</view>
							<view
								style="width: 100%;height: 20px;margin-top: auto;margin-bottom: 15%;color: #fff;font-size: 15px;text-align: center;">
								<text>{{gaugeData.left.name}}</text>
							</view>
						</view>
						<view style="width: 75%;height: 100%;display: flex;justify-content: center;position: relative;">
							<view style="width: 30%;height: 80%;top: 12%;left: 12%;position: absolute;">
								<qiun-data-charts type="gauge"
									:opts="{title:{name: gaugeData.gauge1.title,color: '#fff',fontSize: 25,offsetY:40},subtitle: {name: gaugeData.gauge1.subTitle,color: '#fff',fontSize: 15,offsetY:40}, extra: {gauge: { width: 10, startNumber:gaugeData.gauge1.start, endNumber: gaugeData.gauge1.end, pointer: {width: 10,color:'#407FFF'}, startAngle: 0.75, endAngle: 0.75, splitLine: {width: 5, childWidth: 3, fixRadius: -10, splitNumber:5} }}}"
									:chartData="gaugeData.gauge1.chartData" />
							</view>
							<view style="width: 33%;height: 100%;">
								<qiun-data-charts type="gauge"
									:opts="{title:{name: gaugeData.gauge2.title,color: '#fff',fontSize: 25,offsetY:50},subtitle: {name: gaugeData.gauge2.subTitle,color: '#fff',fontSize: 15,offsetY:50}, extra: {gauge: { width: 10, startNumber:gaugeData.gauge2.start, endNumber: gaugeData.gauge2.end, pointer: {width: 15,color:'#407FFF'}, splitLine: {width: 5, childWidth: 3, fixRadius: -10, splitNumber:10} }}}"
									:chartData="gaugeData.gauge2.chartData" />
							</view>
							<view style="width: 30%;height: 80%;top: 12%;position: absolute;right: 12%">
								<qiun-data-charts type="gauge"
									:opts="{title:{name: gaugeData.gauge3.title,color: '#fff',fontSize: 25,offsetY:40},subtitle: {name: gaugeData.gauge3.subTitle,color: '#fff',fontSize: 15,offsetY:40}, extra: {gauge: { width: 10, startNumber:gaugeData.gauge3.start, endNumber: gaugeData.gauge3.end, pointer: {width: 10,color:'#407FFF'}, startAngle: 1.25, endAngle: 1.25, splitLine: {width: 5, childWidth: 3, fixRadius: -10, splitNumber:5} }}}"
									:chartData="gaugeData.gauge3.chartData" />
							</view>
						</view>
					</view>
					<view style="width: 100%; height: 50%;display: flex;flex-direction: column;">
						<view class="tab">
							<view style="margin-left: 0;margin-right: auto;display: flex;height: 20px;">
								<view class="leftTabItem" :class="{'active' : 0 == leftTabIndex}"
									@click="clickLeftTab(0)">空气</view>
								<view class="leftTabItem" :class="{'active' : 1 == leftTabIndex}"
									@click="clickLeftTab(1)">土壤</view>
							</view>
							<view style="margin-left: auto;margin-right: 0;display: flex;height: 20px;">
								<view class="tabItem" :class="{'active' : 0 == tabIndex}" @click="clickTab(0)">空气温度
								</view>
								<view class="tabItem" :class="{'active' : 1 == tabIndex}" @click="clickTab(1)">空气湿度
								</view>
								<view class="tabItem" :class="{'active' : 2 == tabIndex}" @click="clickTab(2)">光照</view>
								<view class="tabItem" :class="{'active' : 3 == tabIndex}" @click="clickTab(3)">风速</view>
								<view class="tabItem" :class="{'active' : 4 == tabIndex}" @click="clickTab(4)">二氧化碳
								</view>
								<view class="tabItem" :class="{'active' : 5 == tabIndex}" @click="clickTab(5)">降雨量
								</view>
							</view>
						</view>
						<view style="width: 100%;height: calc(100% - 20px);">
							<qiun-data-charts type="area"
								:opts="{fontColor:'#9FCEFF', legend:{show: false}, xAxis:{axisLineColor:'#7389B9'}, yAxis:{lineColor:'#7389B9', gridType: 'solid', gridColor: '#2A3968'}, extra: {area:{gradient:true, opacity:0.8}}}"
								:chartData="middleArea" />
						</view>
					</view>
				</view>
				<view
					style="margin-top: 4px;width: 100%; height: calc(40% - 4px);overflow: hidden;display: flex;border: 0.5px solid #007ED7;background-color: #000000;">
					<view style="height: calc(100% - 10px);display: flex;flex-direction: column;margin: 5px 5px;"
						:style="{'width': videoOperWidth + 'px'}">
						<view class="normal" :style="{'height': videoOperHeight + 'px'}"
							v-for="(item,index) in photoList" :key="index"
							:class="{'active2' : index == selectedPhotoIndex}" @click="photoChoice(index)">
							<image :src="item.cover" mode="aspectFit" style="width: 100%;height: 100%;"></image>
						</view>
					</view>
					<view id="video-container" class="video"
						:style="{width: videoWidth + 'px', height: videoHeight + 'px'}"></view>
					<view style="position: absolute;"
						:style="{width: videoWidth + 'px', height: videoHeight + 'px', left: (videoOperWidth + 10) + 'px' }"
						@click="fullScreen()">
					</view>
					<view class="videoOper" :style="{'width': videoOperWidth + 'px'}">
						<view
							style="width: calc(100% - 10px);height: calc(50% - 10px);margin-top: 5px;overflow: hidden;background-color: #0686D8;display: flex;flex-direction: column;border-radius: 5px;align-items: center;text-align: center;">
							<view style="width: 100%;height: 50%;display: flex;align-items: center;"
								@click="videoOper(8)">
								<image style="width: 100%;height: 60%;" src="../static/icon_036.png" mode="aspectFit">
								</image>
							</view>
							<view
								style="width: calc(100% - 10px);height: 50%;border-top: 0.5px solid #fff;display: flex;align-items: center;"
								@click="videoOper(9)">
								<image style="width: 100%;height: 60%;" src="../static/icon_037.png" mode="aspectFit">
								</image>
							</view>
						</view>
						<view
							style="width: calc(100% - 10px);height: calc(50% - 10px);margin-top: 10px;display: flex;flex-direction: column;background-color: #0686D8;border-radius: 5px;">
							<view style="width: 100%;height: 33%;display: flex;">
								<view style="width: 100%;height: 100%;margin: auto;" @click="videoOper(0)">
									<image style="width: 100%;height: 100%;" src="../static/icon_021.png"
										mode="aspectFit"></image>
								</view>
							</view>
							<view style="width: 100%;height: 34%;display: flex;">
								<view style="width: 50%;height: 100%;display: flex">
									<view style="width: 100%;height: 100%;margin: auto;" @click="videoOper(2)">
										<image style="width: 100%;height: 100%;" src="../static/icon_022.png"
											mode="aspectFit"></image>
									</view>
								</view>
								<view style="width: 50%;height: 100%;display: flex;">
									<view style="width: 100%;height: 100%;margin: auto;" @click="videoOper(3)">
										<image style="width: 100%;height: 100%;" src="../static/icon_023.png"
											mode="aspectFit"></image>
									</view>
								</view>
							</view>
							<view style="width: 100%;height: 34%;display: flex;">
								<view style="width: 100%;height: 100%;margin: 0 auto auto auto;" @click="videoOper(1)">
									<image style="width: 100%;height: 100%;" src="../static/icon_024.png"
										mode="aspectFit"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="right">
				<view
					style="width: 100%;height: 20%;overflow: hidden;border: 0.5px solid #007ED7;display: flex;flex-direction: column;">
					<view class="right-title">
						<view style="margin-left: 10px;height: 100%;">
							<text
								style="font-size: 14px; background-image: linear-gradient(to right,#0072FF,#00EAFF,#01AAFF); -webkit-background-clip:text; color: transparent;">一周降雨量变化</text>
						</view>
					</view>
					<view style="width: 100%;height: calc(100% - 25px);">
						<qiun-data-charts type="line"
							:opts="{fontColor: '#65ABE7', dataPointShapeType:'hollow', legend:{show: false}, xAxis:{axisLineColor:'#7389B9'}, yAxis:{gridType: 'solid', gridColor: '#2A3968'} }"
							:chartData="rainfall" />
					</view>
				</view>
				<view
					style="width: 100%;height: 20%;overflow: hidden;border: 0.5px solid #007ED7;margin-top: 4px;display: flex;flex-direction: column;">
					<view class="right-title">
						<view style="margin-left: 10px;height: 100%;">
							<text
								style="font-size: 14px; background-image: linear-gradient(to right,#0072FF,#00EAFF,#01AAFF); -webkit-background-clip:text; color: transparent;">一周湿度变化</text>
						</view>
					</view>
					<view style="width: 100%;height: calc(100% - 25px);">
						<qiun-data-charts type="line"
							:opts="{fontColor: '#65ABE7', dataPointShapeType:'hollow', legend:{show: false}, xAxis:{axisLineColor:'#7389B9'}, yAxis:{gridType: 'solid', gridColor: '#2A3968'}}"
							:chartData="humidity" />
					</view>
				</view>
				<view
					style="width: 100%;height: 20%;overflow: hidden;border: 0.5px solid #007ED7;margin-top: 4px;display: flex;flex-direction: column;">
					<view class="right-title">
						<view style="margin-left: 10px;height: 100%;">
							<text
								style="font-size: 14px; background-image: linear-gradient(to right,#0072FF,#00EAFF,#01AAFF); -webkit-background-clip:text; color: transparent;">一周光照变化</text>
						</view>
					</view>
					<view style="width: 100%;height: calc(100% - 25px);">
						<qiun-data-charts type="column"
							:opts="{fontColor: '#65ABE7', legend:{show: false}, xAxis:{axisLineColor:'#7389B9'}, yAxis:{gridType: 'solid', gridColor: '#2A3968'}}"
							:chartData="wind" />
					</view>
				</view>
				<view
					style="width: 100%;height: calc(40% - 12px);margin-top: 4px;display: flex;flex-direction: column;overflow: hidden;">
					<view class="right-title">
						<view style="margin-left: 10px;height: 100%;">
							<text
								style="font-size: 14px; background-image: linear-gradient(to right,#0072FF,#00EAFF,#01AAFF); -webkit-background-clip:text; color: transparent;">土壤环境报告</text>
						</view>
					</view>
					<view style="width: 100%;height: calc(100% - 25px);display: flex;">
						<view style="width: 70%;height: 70%;">
							<qiun-data-charts type="radar"
								:opts="{fontSize:6,legend:{show: false}, dataPointShape: false, extra: {radar: {labelColor: '#fff', opacity:1}}}"
								:chartData="radarData" />
						</view>
						<view style="width: 30%;height: 100%;display: flex;flex-direction: column;font-size: 6px;">
							<view v-for="(item,index) in radarRightData" :key="index"
								style="width: 100%;height: 20px;line-height: 20px;text-align: left;font-size: 6px;margin-top: 5px;display: flex;">
								<view style="width: 50px;color: #fff;font-size: 6px;">
									<text style="font-size: 6px;">{{item.name}}</text>
								</view>
								<view v-bind:style="dynamicStyle(index)">
									<text>{{item.value}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<f-drop-menu style="position: absolute;top: 100px;left: 40px;" size="small" align='left' :value="menuShow"
			:list="baseList" @click="menuChoice" @change="handleChange"></f-drop-menu>
		<zoom-map :latitude="latitude" :longitude="longitude" :markers="markers" ref="zoomMap"></zoom-map>
		<!-- <sensor-record ref="sensorRecord"></sensor-record> -->
	</view>
</template>

<script>
	import EZUIKit from "ezuikit-js";
	import dataUtil from '@/common/js/date_util.js';
	import zoomMap from '@/components/zoomMap.vue';
	// import sensorRecord from '@/components/sensorRecord.vue';
	export default {
		components: {
			zoomMap,
			// sensorRecord
		},
		data() {
			return {
				latitude: "34.76",
				longitude: "113.65",
				scale: 14, //地图层级
				videoWidth: 160,
				videoHeight: 90,
				windowHeight: 0,
				windowWidth: 0,
				videoOperWidth: 0,
				videoOperHeight: 0,
				markers: [],
				baseList: [],
				baseID: '',
				menuShow: false,
				current: {},
				rainfall: {},
				humidity: {},
				wind: {},
				merchantId: "",
				mapIndex: 0,
				player: null,
				baseName: "",
				leftData: [{
						imge: "../static/icon_003.png",
						name: "空气温度",
						value: "0"
					},
					{
						imge: "../static/icon_004.png",
						name: "空气湿度",
						value: "0"
					},
					{
						imge: "../static/icon_005.png",
						name: "光照",
						value: "0"
					},
					{
						imge: "../static/icon_006.png",
						name: "二氧化碳",
						value: "0"
					},
					{
						imge: "../static/icon_007.png",
						name: "风速",
						value: "0"
					},
					{
						imge: "../static/icon_008.png",
						name: "风向",
						value: "0"
					},
					{
						imge: "../static/icon_009.png",
						name: "降雨量",
						value: "0"
					},
					{
						imge: "../static/icon_013.png",
						name: "土壤温度",
						value: "0"
					},
					{
						imge: "../static/icon_014.png",
						name: "墒情",
						value: "0"
					},
					{
						imge: "../static/icon_015.png",
						name: "PH值",
						value: "0"
					},
					{
						imge: "../static/icon_016.png",
						name: "氮",
						value: "0"
					},
					{
						imge: "../static/icon_017.png",
						name: "磷",
						value: "0"
					},
					{
						imge: "../static/icon_018.png",
						name: "钾",
						value: "0"
					}
				],
				radarData: {
					categories: ["1", "2", "3", "4", "5", "6"],
					series: [{
						data: [90, 90, 90, 90, 90, 90],
						color: "#EBE309",
						name: ""
					}],
				},
				radarRightData: [{
						name: "1",
						value: "90"
					},
					{
						name: "2",
						value: "90"
					},
					{
						name: "3",
						value: "90"
					},
					{
						name: "4",
						value: "90"
					},
					{
						name: "5",
						value: "90"
					},
					{
						name: "6",
						value: "90"
					}
				],
				airData: {
					left: {
						name: "温度",
						value: '0.00'
					},
					gauge1: {
						title: "0.00",
						subTitle: "湿度",
						start: 0,
						end: 100,
						chartData: {
							categories: [{
								value: 0.3,
								color: "#FDDA3B"
							}, {
								value: 0.6,
								color: "#03D313"
							}, {
								value: 1,
								color: "#00D2DF"
							}],
							series: [{
								name: "",
								data: 0.0
							}],
						}
					},
					gauge2: {
						title: "0.00",
						subTitle: "CO2",
						start: 0,
						end: 1000,
						chartData: {
							categories: [{
								value: 0.1,
								color: "#FDDA3B"
							}, {
								value: 0.3,
								color: "#03D313"
							}, {
								value: 0.7,
								color: "#00D2DF"
							}, {
								value: 0.9,
								color: "#03D313"
							}, {
								value: 1,
								color: "#FDDA3B"
							}],
							series: [{
								name: "",
								data: 0.0
							}],
						}
					},
					gauge3: {
						title: "0.00",
						subTitle: "光照",
						start: 0,
						end: 10,
						chartData: {
							categories: [{
								value: 0.4,
								color: "#00D2DF"
							}, {
								value: 0.7,
								color: "#03D313"
							}, {
								value: 1,
								color: "#FDDA3B"
							}],
							series: [{
								name: "",
								data: 0.0
							}],
						}
					}
				},
				earthData: {
					left: {
						name: "墒情",
						value: "0.00"
					},
					gauge1: {
						title: "0.00",
						subTitle: "氮",
						start: 0,
						end: 300,
						chartData: {
							categories: [{
								value: 0.3,
								color: "#FDDA3B"
							}, {
								value: 0.6,
								color: "#03D313"
							}, {
								value: 1,
								color: "#00D2DF"
							}],
							series: [{
								name: "",
								data: 0.0
							}],
						}
					},
					gauge2: {
						title: "0.00",
						subTitle: "磷",
						start: 0,
						end: 300,
						chartData: {
							categories: [{
								value: 0.1,
								color: "#FDDA3B"
							}, {
								value: 0.3,
								color: "#03D313"
							}, {
								value: 0.7,
								color: "#00D2DF"
							}, {
								value: 0.9,
								color: "#03D313"
							}, {
								value: 1,
								color: "#FDDA3B"
							}],
							series: [{
								name: "",
								data: 0.0
							}],
						}
					},
					gauge3: {
						title: "0.00",
						subTitle: "钾",
						start: 0,
						end: 300,
						chartData: {
							categories: [{
								value: 0.4,
								color: "#00D2DF"
							}, {
								value: 0.7,
								color: "#03D313"
							}, {
								value: 1,
								color: "#FDDA3B"
							}],
							series: [{
								name: "",
								data: 0.0
							}],
						}
					}
				},
				gaugeData: {
					left: {
						name: "温度",
						value: '0.00'
					},
					gauge1: {
						title: "0.00",
						subTitle: "湿度",
						start: 0,
						end: 100,
						chartData: {
							categories: [{
								value: 0.3,
								color: "#FDDA3B"
							}, {
								value: 0.6,
								color: "#03D313"
							}, {
								value: 1,
								color: "#00D2DF"
							}],
							series: [{
								name: "",
								data: 0.0
							}],
						}
					},
					gauge2: {
						title: "0.00",
						subTitle: "CO2",
						start: 0,
						end: 1000,
						chartData: {
							categories: [{
								value: 0.1,
								color: "#FDDA3B"
							}, {
								value: 0.3,
								color: "#03D313"
							}, {
								value: 0.7,
								color: "#00D2DF"
							}, {
								value: 0.9,
								color: "#03D313"
							}, {
								value: 1,
								color: "#FDDA3B"
							}],
							series: [{
								name: "",
								data: 0.0
							}],
						}
					},
					gauge3: {
						title: "0.00",
						subTitle: "光照",
						start: 0,
						end: 10,
						chartData: {
							categories: [{
								value: 0.4,
								color: "#00D2DF"
							}, {
								value: 0.7,
								color: "#03D313"
							}, {
								value: 1,
								color: "#FDDA3B"
							}],
							series: [{
								name: "",
								data: 0.0
							}],
						}
					}
				}, //仪表数据
				hours: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17",
					"18", "19", "20", "21", "22", "23"
				],
				middleAreas: [{
						categories: this.hours,
						series: [{
							name: "",
							data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
						}],
					},
					{
						categories: this.hours,
						series: [{
							name: "",
							data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
						}],
					},
					{
						categories: this.hours,
						series: [{
							name: "",
							data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
						}],
					},
					{
						categories: this.hours,
						series: [{
							name: "",
							data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
						}],
					},
					{
						categories: this.hours,
						series: [{
							name: "",
							data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
						}],
					},
					{
						categories: this.hours,
						series: [{
							name: "",
							data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
						}],
					},
				],
				middleArea: {},
				tabIndex: 0,
				leftTabIndex: 0,
				accessToken: "",
				serialNumber: "",
				appKey: "",
				appSecret: "",
				channelNumber: "",
				photoList: [],
				selectedPhotoIndex: 0,
			}
		},
		mounted() {
			// 注意，这里要用个变量存this，不然进到getSystemInfo后this指向会变化，找不到data变量
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					let middleHeight = res.windowHeight - 70;
					that.videoHeight = middleHeight * 0.4 - 4;
					that.videoWidth = that.videoHeight * 16 / 9;
					that.videoOperWidth = ((res.windowWidth - 20) * 0.6 - 20 - that.videoWidth - 20) / 2;
					that.videoOperHeight = that.videoOperWidth * 9 / 16;
				}
			})
			this.gaugeData = this.airData;
		},
		onLoad(e) {
			this.mapIndex = e.index;
			this.merchantId = e.id;
			this.getBaseList();
		},
		onReady() {

		},
		methods: {
			showMap() {
				this.$refs.zoomMap.show = true;
			},
			dynamicStyle(index) {
				if (index == 0) {
					return 'width: calc(100% - 50px);background-image: linear-gradient(to right, #000120, #0E6DCC);color:#695EFF'
				} else if (index == 1) {
					return 'width: calc(100% - 50px);background-image: linear-gradient(to right, #000120, #0E6DCC);color:#DF8338'
				} else if (index == 1) {
					return 'width: calc(100% - 50px);background-image: linear-gradient(to right, #000120, #0E6DCC);color:#B7EB09'
				} else if (index == 1) {
					return 'width: calc(100% - 50px);background-image: linear-gradient(to right, #000120, #0E6DCC);color:#0AE8A4'
				} else if (index == 1) {
					return 'width: calc(100% - 50px);background-image: linear-gradient(to right, #000120, #0E6DCC);color:#00D4FF'
				} else {
					return 'width: calc(100% - 50px);background-image: linear-gradient(to right, #000120, #0E6DCC);color:#009DFF'
				}
			},
			baseClick() {
				this.menuShow = true;
			},
			handleChange(e) {
				console.log(e);
				this.topSelect = this.oldSelect;
				this.menuShow = e;
			},
			photoChoice(index) {
				this.selectedPhotoIndex = index;
				this.serialNumber = this.photoList[index].serial_number;
				this.appKey = this.photoList[index].app_key;
				this.appSecret = this.photoList[index].secret;
				this.channelNumber = this.photoList[index].channel_number;
				this.playVideo();
			},
			menuChoice(item, index) {
				console.log(item);
				this.mapIndex = index;
				this.baseName = item.name;
				this.latitude = item.lat;
				this.longitude = item.lon;
				let points = [];
				let point = {
					id: index,
					latitude: item.lat,
					longitude: item.lon,
					iconPath: '../static/icon_010.png',
					callout: {
						content: item.name,
						color: '#000',
						fontSize: 12,
						display: 'ALWAYS'
					}
				}
				points.push(point);
				this.markers = points;
				this.menuShow = false;
				let photoList = this.baseList[index].photoList;
				this.photoList = photoList;
				if (photoList.length > 0) {
					this.serialNumber = photoList[0].serial_number;
					if (this.accessToken == "") {
						this.appKey = photoList[0].app_key;
						this.appSecret = photoList[0].secret;
						this.channelNumber = photoList[0].channel_number;
						this.getToken();
					} else {
						this.playVideo();
					}
				}
				this.baseID = item.id;
				this.getBaseInfo(item.id);
				this.getBaseRealTimeInfo(item.id);
			},
			lookRealTime() {
				uni.navigateTo({
					url:'/pages/sensorRecord?baseID='+this.baseID +'&baseName='+ this.baseName + '&merchantID=' + this.merchantId
				})
			},
			playVideo() {
				// console.log(this.serialNumber);
				// console.log(this.accessToken);
				let serialNumber = this.serialNumber;
				if (this.player == null) {
					this.player = new EZUIKit.EZUIKitPlayer({
						autoplay: true,
						id: "video-container",
						accessToken: this.accessToken,
						url: 'ezopen://open.ys7.com/' + serialNumber + '/1.live',
						template: "simple", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
						// 视频上方头部控件
						//header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
						//plugin: ['talk'],                       // 加载插件，talk-对讲
						// 视频下方底部控件
						//footer: ["talk", "broadcast", "hd", "fullScreen"], // 如果template参数不为simple,该字段将被覆盖
						//audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
						// openSoundCallBack: data => console.log("开启声音回调", data),
						// closeSoundCallBack: data => console.log("关闭声音回调", data),
						// startSaveCallBack: data => console.log("开始录像回调", data),
						// stopSaveCallBack: data => console.log("录像回调", data),
						// capturePictureCallBack: data => console.log("截图成功回调", data),
						//fullScreenCallBack: data => console.log("全屏回调", data),
						// getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
						// width: 100%,
						// height: 100%,
					});
				} else {
					this.player.play('ezopen://open.ys7.com/' + serialNumber + '/1.live');
					// let that = this
					// this.player.stop().then(()=>{
					// 	this.player.play('ezopen://open.ys7.com/' + serialNumber + '/1.live');
					// })
				}
			},
			fullScreen() {
				uni.navigateTo({
					url: '/pages/baseCamra?appKey=' + this.appKey + '&serialNumber=' + this.serialNumber +
						'&appSecret=' + this.appSecret + '&channelNumber=' + this.channelNumber + '&landscape=0'
				})
			},
			getBaseList() {
				let that = this;
				this.$http.post({
					data: {
						cmd: "getBaseList",
						merchantId: that.merchantId,
						nowPage: 1,
						pageCount: 100
					}
				}).then(res => {
					if (res.statusCode == 200) {
						if (res.data.result == 0) {
							that.baseList = res.data.body.dataList;
							that.baseName = that.baseList[that.mapIndex].name;
							that.baseID = that.baseList[that.mapIndex].id;
							let photoList = that.baseList[that.mapIndex].photoList;
							that.latitude = that.baseList[that.mapIndex].lat;
							that.longitude = that.baseList[that.mapIndex].lon;

							let points = [];
							let point = {
								id: that.mapIndex,
								latitude: that.latitude,
								longitude: that.longitude,
								iconPath: '../static/icon_010.png',
								callout: {
									content: that.baseName,
									color: '#000',
									fontSize: 12,
									display: 'ALWAYS'
								}
							}
							points.push(point);
							that.markers = points;

							that.photoList = photoList;
							if (photoList.length > 0) {
								that.serialNumber = photoList[0].serial_number;
								that.appKey = photoList[0].app_key;
								that.appSecret = photoList[0].secret;
								that.channelNumber = photoList[0].channel_number;
								that.getToken();
							}

							that.getBaseInfo(that.baseID);
							that.getBaseRealTimeInfo(that.baseID);
						} else {
							that.$msg(res.data.resultNote);
						}
					} else {
						that.$msg('网络出错！');
					}
				});
			},
			getToken() {
				let that = this;
				new Promise((resolve, reject) => {
					uni.request({
						method: "POST",
						url: "https://open.ys7.com/api/lapp/token/get",
						data: {
							appKey: that.appKey,
							appSecret: that.appSecret
						},
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						dataType: 'json',
						success: res => {
							if (res.statusCode == '200') {
								that.accessToken = res.data.data.accessToken;
								that.playVideo();
							}
						},
						fail: err => {
							reject(err);
						}
					});
				});
			},
			getBaseInfo(e) {
				let that = this;
				this.$http.post({
					data: {
						cmd: "getDataScreen",
						base_id: e
					}
				}).then(res => {
					if (res.statusCode == 200) {
						if (res.data.result == 0) {
							let current = res.data.body.current;
							let date = res.data.body.date;
							date.forEach((elem, index) => {
								let time = dataUtil.parseDate(elem, "yyyy-MM-dd");
								date[index] = dataUtil.dateFormat(time, "d");
							});
							// console.log(date);
							that.rainfall = {
								categories: date,
								series: [{
									name: "七天降雨变化",
									color: "#2BFAFF",
									data: that.keepTwoDecimalPlace(res.data.body.rainfall)
								}],
							};
							that.humidity = {
								categories: date,
								series: [{
									name: "七天湿度变化",
									color: "#2BFAFF",
									data: that.keepTwoDecimalPlace(res.data.body.humidity)
								}],
							};
							that.wind = {
								categories: date,
								series: [{
									name: "七天光照变化",
									color: "#F17522",
									data: that.keepTwoDecimalPlace(res.data.body.light)
								}],
							};
							that.middleAreas = [{
									categories: this.hours,
									series: [{
										name: "空气温度",
										color: "#47C8FF",
										data: that.keepTwoDecimalPlace(res.data.body.hourTemperature)
									}],
								},
								{
									categories: this.hours,
									series: [{
										name: "空气湿度",
										color: "#47C8FF",
										data: that.keepTwoDecimalPlace(res.data.body.hourHumidity)
									}],
								},
								{
									categories: this.hours,
									series: [{
										name: "光照",
										color: "#47C8FF",
										data: that.keepTwoDecimalPlace(res.data.body.hourLight)
									}],
								},
								{
									categories: this.hours,
									series: [{
										name: "风速",
										color: "#47C8FF",
										data: that.keepTwoDecimalPlace(res.data.body.hourWind)
									}],
								},
								{
									categories: this.hours,
									series: [{
										name: "二氧化碳",
										color: "#47C8FF",
										data: that.keepTwoDecimalPlace(res.data.body.hourCO2)
									}],
								},
								{
									categories: this.hours,
									series: [{
										name: "降雨量",
										color: "#47C8FF",
										data: that.keepTwoDecimalPlace(res.data.body.hourRainfall)
									}],
								},
							];
							that.tabIndex = 0;
							that.middleArea = that.middleAreas[0];
						} else {
							that.$msg(res.data.resultNote);
						}
					} else {
						that.$msg('网络出错！');
					}
				});
			},
			//保留两位小数
			keepTwoDecimalPlace(e) {
				e.forEach((item, index) => {
					e[index] = item.toFixed(2);
				});
				return e;
			},
			getBaseRealTimeInfo(e) {
				let that = this;
				this.$http.post({
					data: {
						cmd: "getRealTimeDataScreen",
						base_id: e
					}
				}).then(res => {
					if (res.statusCode == 200) {
						if (res.data.result == 0) {
							let current = res.data.body.current;
							that.airData = {
								left: {
									name: "温度",
									value: current.wd
								},
								gauge1: {
									title: current.sd,
									subTitle: "湿度",
									start: 0,
									end: 100,
									chartData: {
										categories: [{
											value: 0.3,
											color: "#FDDA3B"
										}, {
											value: 0.6,
											color: "#03D313"
										}, {
											value: 1,
											color: "#00D2DF"
										}],
										series: [{
											name: "",
											data: parseFloat(current.sd) / 100
										}],
									}
								},
								gauge2: {
									title: current.CO2,
									subTitle: "CO2",
									start: 0,
									end: 1000,
									chartData: {
										categories: [{
											value: 0.1,
											color: "#FDDA3B"
										}, {
											value: 0.3,
											color: "#03D313"
										}, {
											value: 0.7,
											color: "#00D2DF"
										}, {
											value: 0.9,
											color: "#03D313"
										}, {
											value: 1,
											color: "#FDDA3B"
										}],
										series: [{
											name: "",
											data: parseFloat(current.CO2) / 1000
										}],
									}
								},
								gauge3: {
									title: (parseFloat(current.gz) / 10000).toFixed(2) + '万',
									subTitle: "光照",
									start: 0,
									end: 10,
									chartData: {
										categories: [{
											value: 0.4,
											color: "#00D2DF"
										}, {
											value: 0.7,
											color: "#03D313"
										}, {
											value: 1,
											color: "#FDDA3B"
										}],
										series: [{
											name: "",
											data: parseFloat(current.gz) / 100000
										}],
									}
								}
							};
							that.earthData = {
								left: {
									name: "墒情",
									value: current.sq
								},
								gauge1: {
									title: current.trd,
									subTitle: "氮",
									start: 0,
									end: 300,
									chartData: {
										categories: [{
											value: 0.3,
											color: "#FDDA3B"
										}, {
											value: 0.6,
											color: "#03D313"
										}, {
											value: 1,
											color: "#00D2DF"
										}],
										series: [{
											name: "",
											data: parseFloat(current.trd) / 300
										}],
									}
								},
								gauge2: {
									title: current.trl,
									subTitle: "磷",
									start: 0,
									end: 300,
									chartData: {
										categories: [{
											value: 0.1,
											color: "#FDDA3B"
										}, {
											value: 0.3,
											color: "#03D313"
										}, {
											value: 0.7,
											color: "#00D2DF"
										}, {
											value: 0.9,
											color: "#03D313"
										}, {
											value: 1,
											color: "#FDDA3B"
										}],
										series: [{
											name: "",
											data: parseFloat(current.trl) / 300
										}],
									}
								},
								gauge3: {
									title: current.trj,
									subTitle: "钾",
									start: 0,
									end: 300,
									chartData: {
										categories: [{
											value: 0.4,
											color: "#00D2DF"
										}, {
											value: 0.7,
											color: "#03D313"
										}, {
											value: 1,
											color: "#FDDA3B"
										}],
										series: [{
											name: "",
											data: parseFloat(current.trj) / 300
										}],
									}
								}
							};
							that.gaugeData = that.airData;
							that.current = current;
							if (res.data.body.btype == 1) {
								that.leftData = [{
										imge: "../static/icon_003.png",
										name: "空气温度",
										value: current.wd
									},
									{
										imge: "../static/icon_004.png",
										name: "空气湿度",
										value: current.sd
									},
									{
										imge: "../static/icon_005.png",
										name: "光照",
										value: current.gz
									},
									{
										imge: "../static/icon_006.png",
										name: "二氧化碳",
										value: current.CO2
									},
									{
										imge: "../static/icon_007.png",
										name: "风速",
										value: current.fs
									},
									{
										imge: "../static/icon_008.png",
										name: "风向",
										value: current.fx
									},
									{
										imge: "../static/icon_009.png",
										name: "降雨量",
										value: current.yl
									},
									{
										imge: "../static/icon_013.png",
										name: "土温",
										value: current.dw
									},
									{
										imge: "../static/icon_014.png",
										name: "墒情",
										value: current.sq
									},
									{
										imge: "../static/icon_015.png",
										name: "PH值",
										value: current.trPH
									},
									{
										imge: "../static/icon_016.png",
										name: "氮",
										value: current.trd
									},
									{
										imge: "../static/icon_017.png",
										name: "磷",
										value: current.trl
									},
									{
										imge: "../static/icon_018.png",
										name: "钾",
										value: current.trj
									}
								];
								that.radarData = {
									categories: ["氮", "磷", "钾", "土温", "墒情", "PH值"],
									series: [{
										data: [current.trd, current.trl, current.trj, current.dw,
											current.sq, current.trPH
										],
										color: "#EBE309",
										name: ""
									}],
								};
								that.radarRightData = [{
										name: "氮",
										value: current.trd
									},
									{
										name: "磷",
										value: current.trl
									},
									{
										name: "钾",
										value: current.trj
									},
									{
										name: "土温",
										value: current.dw
									},
									{
										name: "墒情",
										value: current.sq
									},
									{
										name: "PH值",
										value: current.trPH
									}
								];
							} else if (res.data.body.btype == 2) {
								that.leftData = [{
										imge: "../static/icon_003.png",
										name: "空气温度",
										value: current.wd
									},
									{
										imge: "../static/icon_004.png",
										name: "空气湿度",
										value: current.sd
									},
									{
										imge: "../static/icon_005.png",
										name: "光照",
										value: current.gz
									},
									{
										imge: "../static/icon_006.png",
										name: "二氧化碳",
										value: current.CO2
									},
									{
										imge: "../static/icon_007.png",
										name: "风速",
										value: current.fs
									},
									{
										imge: "../static/icon_008.png",
										name: "风向",
										value: current.fx
									},
									{
										imge: "../static/icon_009.png",
										name: "降雨量",
										value: current.yl
									},
									{
										imge: "../static/icon_016.png",
										name: "NH3",
										value: current.NH3
									},
									{
										imge: "../static/icon_017.png",
										name: "H2S",
										value: current.H2S
									},
									{
										imge: "../static/icon_018.png",
										name: "CO2",
										value: current.CO2
									}
								];
								that.radarData = {
									categories: ["NH3", "H2S", "CO2", "光照", "温度", "湿度"],
									series: [{
										data: [current.NH3, current.H2S, current.CO2, current.gz,
											current.wd, current.sd
										],
										color: "#EBE309",
										name: ""
									}],
								};
								that.radarRightData = [{
										name: "NH3",
										value: current.NH3
									},
									{
										name: "H2S",
										value: current.H2S
									},
									{
										name: "CO2",
										value: current.CO2
									},
									{
										name: "光照",
										value: current.gz
									},
									{
										name: "温度",
										value: current.wd
									},
									{
										name: "湿度",
										value: current.sd
									}
								];
							} else if (res.data.body.btype == 3) {
								that.leftData = [{
										imge: "../static/icon_003.png",
										name: "空气温度",
										value: current.wd
									},
									{
										imge: "../static/icon_004.png",
										name: "空气湿度",
										value: current.sd
									},
									{
										imge: "../static/icon_005.png",
										name: "光照",
										value: current.gz
									},
									{
										imge: "../static/icon_006.png",
										name: "二氧化碳",
										value: current.CO2
									},
									{
										imge: "../static/icon_007.png",
										name: "风速",
										value: current.fs
									},
									{
										imge: "../static/icon_008.png",
										name: "风向",
										value: current.fx
									},
									{
										imge: "../static/icon_009.png",
										name: "降雨量",
										value: current.yl
									},
									{
										imge: "../static/icon_016.png",
										name: "水溶氧",
										value: current.sry
									},
									{
										imge: "../static/icon_017.png",
										name: "水PH值",
										value: current.sPH
									},
									{
										imge: "../static/icon_018.png",
										name: "水温度",
										value: current.sw
									}
								];
								that.radarData = {
									categories: ["水溶氧", "水PH值", "水温度", "光照", "温度", "湿度"],
									series: [{
										data: [current.sry, current.sPH, current.sw, current.gz,
											current.wd, current.sd
										],
										color: "#EBE309",
										name: ""
									}],
								};
								that.radarRightData = [{
										name: "水溶氧",
										value: current.sry
									},
									{
										name: "水PH值",
										value: current.sPH
									},
									{
										name: "水温度",
										value: current.sw
									},
									{
										name: "光照",
										value: current.gz
									},
									{
										name: "温度",
										value: current.wd
									},
									{
										name: "湿度",
										value: current.sd
									}
								];
							} else if (res.data.body.btype == 4) {
								that.leftData = [{
										imge: "../static/icon_003.png",
										name: "空气温度",
										value: current.wd
									},
									{
										imge: "../static/icon_004.png",
										name: "空气湿度",
										value: current.sd
									},
									{
										imge: "../static/icon_005.png",
										name: "光照",
										value: current.gz
									},
									{
										imge: "../static/icon_006.png",
										name: "二氧化碳",
										value: current.CO2
									},
									{
										imge: "../static/icon_007.png",
										name: "风速",
										value: current.fs
									},
									{
										imge: "../static/icon_008.png",
										name: "风向",
										value: current.fx
									},
									{
										imge: "../static/icon_009.png",
										name: "降雨量",
										value: current.yl
									},
									{
										imge: "../static/icon_016.png",
										name: "负氧离子",
										value: current.flz
									},
									{
										imge: "../static/icon_017.png",
										name: "PM2.5",
										value: current.PM2
									},
									{
										imge: "../static/icon_018.png",
										name: "CO2",
										value: current.CO2
									}
								];
								that.radarData = {
									categories: ["负氧离子", "PM2.5", "CO2", "光照", "温度", "湿度"],
									series: [{
										data: [current.flz, current.PM2, current.CO2, current.gz,
											current.wd, current.sd
										],
										color: "#EBE309",
										name: ""
									}],
								};
								that.radarRightData = [{
										name: "负氧离子",
										value: current.flz
									},
									{
										name: "PM2.5",
										value: current.PM2
									},
									{
										name: "CO2",
										value: current.CO2
									},
									{
										name: "光照",
										value: current.gz
									},
									{
										name: "温度",
										value: current.wd
									},
									{
										name: "湿度",
										value: current.sd
									}
								];
							} else {}
						} else {
							that.$toast.show(res.data.resultNote);
						}
					} else {
						that.$toast.show('网络出错！');
					}
				});
			},
			videoOper(e) { //监控操纵
				let that = this;
				new Promise((resolve, reject) => {
					uni.request({
						method: "POST",
						url: "https://open.ys7.com/api/lapp/device/ptz/start",
						data: {
							accessToken: that.accessToken,
							appKey: that.appKey,
							appSecret: that.appSecret,
							deviceSerial: that.serialNumber,
							channelNo: that.channelNumber,
							direction: e,
							speed: 1
						},
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						dataType: 'json',
						success: res => {
							console.log(res);
							if (res.statusCode == '200') {
								//that.$toast.show('操作成功');
								that.endVideoOper(e);
							}
						},
						fail: err => {
							reject(err);
						}
					});
				});
			},
			endVideoOper(e) {
				let that = this;
				new Promise((resolve, reject) => {
					uni.request({
						method: "POST",
						url: "https://open.ys7.com/api/lapp/device/ptz/stop",
						data: {
							accessToken: that.accessToken,
							deviceSerial: that.serialNumber,
							channelNo: that.channelNumber,
							direction: e,
						},
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						dataType: 'json',
						success: res => {
							if (res.statusCode == '200') {
								//that.toast.show("操作成功");
							}
						},
						fail: err => {
							reject(err);
						}
					});
				});
			},
			clickTab(index) {
				this.tabIndex = index;
				this.middleArea = this.middleAreas[index];
			},
			clickLeftTab(index) {
				this.leftTabIndex = index;
				if (index == 0) {
					this.gaugeData = this.airData;
				} else {
					this.gaugeData = this.earthData;
				}
			}
		}
	}
</script>

<style lang="less">
	page {
		// font-family: 微软雅黑, MicrosoftYahei, sans-serif;
		color: #fff;
		background: #ddd url(@/static/icon_000.png);
		background-size: 100% 100%;
		background-position: 0 0;
		background-repeat: no-repeat;
		width: 100%;
		height: 100%;
	}

	.content {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: calc(100% - 10px);
	}

	.up {
		width: 100%;
		height: 30px;
		text-align: center;
		margin-top: 10px;
		display: flex;
	}

	.down {
		margin: 20px 0 0 10px;
		display: flex;
		flex-direction: row;
		height: calc(100% - 70px);
		width: calc(100% - 20px);
		// overflow: hidden;
		// background-color: #DD524D;
	}

	.left {
		display: flex;
		flex-direction: column;
		text-align: center;
		width: 20%;
		align-items: center;
		height: 100%;
		overflow: hidden;
		// background-color: #007AFF;
	}

	.middle {
		display: flex;
		flex-direction: column;
		margin-left: 10px;
		width: calc(60% - 20px);
		// background-color: #4CD964;
		height: 100%;
		position: relative;
	}

	.video {
		// overflow: hidden;
		background-color: #fff;
		margin-left: 5px;
		overflow-x: hidden;
		overflow-y: hidden;
	}

	.videoOper {
		height: 100%;
		margin-left: 5px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.right {
		display: flex;
		flex-direction: column;
		text-align: center;
		align-items: center;
		margin-left: auto;
		margin-right: 0;
		width: 20%;
		height: 100%;
	}

	.left-option {
		background: url(@/static/icon_001.png) center;
		background-repeat: no-repeat;
		font-size: 15px;
		line-height: 25px;
		text-align: left;
		width: 100%;
		height: 25px;
		color: #fff;
		display: flex;
	}

	.right-title {
		background: url(@/static/icon_001.png) center;
		background-repeat: no-repeat;
		font-size: 15px;
		line-height: 25px;
		text-align: left;
		width: 100%;
		height: 25px;
		color: #fff;
		display: flex;
	}

	.tab {
		width: calc(100% - 40px);
		height: 20px;
		margin-left: 40px;
		display: flex;
		//align-items: center;
		justify-content: flex-end;
	}

	.leftTabItem {
		margin-left: 0;
		margin-right: auto;
		height: 20px;
		padding: 0 10px;
		line-height: 20px;
		font-size: 12px;
		font-weight: bold;
		text-align: center;
		color: #fff;
	}

	.tabItem {
		height: 20px;
		padding: 0 10px;
		line-height: 20px;
		font-size: 12px;
		font-weight: bold;
		text-align: center;
		color: #fff;
	}

	.active {
		background-color: #2191DA;
		border-radius: 10px;
	}

	.normal {
		width: 100%;
		text-align: center;
		height: 50px;
		border: 0.5px solid #007ED7;
		overflow: hidden;
	}

	.active2 {
		border: 0.5px solid #F17522;
	}
</style>
